<template>
    <div>
        <CartTopStepsComponent :current="0"></CartTopStepsComponent>
        <a-table :columns="columns" :data-source="tableData.cartItems " :pagination="false"
                 :row-selection="rowSelection" bordered
        >
            <template #title>全部商品</template>
            <template #bodyCell="{column, record }">
                <template v-if="column.dataIndex === 'product'">
                    <a-list :data-source="[record]" item-layout="horizontal" style="text-align: left">
                        <template #renderItem="{ item }">
                            <a-list-item>
                                <a-list-item-meta>
                                    <template #title>
                                        <a>{{ item.title }}</a>
                                    </template>
                                    <template #description>
                                        <div v-for="attr in item.skuAttrs" :key="attr">
                                            {{ attr }}
                                        </div>
                                    </template>
                                    <template #avatar>
                                        <a-avatar :src="item.image" />
                                    </template>
                                </a-list-item-meta>
                            </a-list-item>
                        </template>
                    </a-list>
                </template>
                <template v-if="column.dataIndex === 'count'">
                    <a-input-number v-model:value="record.count" @change="numChange(record)"></a-input-number>
                </template>
                <template v-if="column.dataIndex === 'action'">
                    <a-button size="small" type="link" @click="deleteProduct([record.skuId])">删除</a-button>
                </template>
            </template>
            <template #footer>总价: {{ tableData.totalAmount }} ￥
                <a-button size="small" @click="goToSettlement">结算</a-button>
            </template>
        </a-table>
    </div>
</template>

<script lang="ts" setup>
import { ATableColumn } from "@/model/UIComponent.ts";
import { onMounted, ref } from "vue";
import { deleteProductFromCartBatch, getCartInfoList, updateProductFromCart } from "@/api/cart/CartApi.ts";
import { Cart, CartItem } from "@/model/CartModel.ts";
import router from "@/router/router.ts";
import CartTopStepsComponent from "@/components/CartTopStepsComponent.vue";
//表格列配置
const columns: ATableColumn[] = [
    {
        key: "product",
        title: "商品",
        dataIndex: "product",
        align: "center",
        width: "50%",
        ellipsis: true,
    },
    {
        key: "price",
        title: "单价",
        dataIndex: "price",
        align: "center",
        ellipsis: true,
    },
    {
        key: "count",
        title: "数量",
        dataIndex: "count",
        align: "center",
        ellipsis: true,
    },
    {
        key: "totalPrice",
        title: "小计",
        dataIndex: "totalPrice",
        align: "center",
        ellipsis: true,
    },
    {
        key: "action",
        title: "操作",
        dataIndex: "action",
        align: "center",
        width: "15%",
        ellipsis: true,
    },
];

// /**
//  * 表格数据模型
//  */
// interface TableData extends CartItem {
//     action: string,
// }

//表格数据
const tableData = ref<Cart>({});
// 表格行选择配置
const rowSelection = {
    // columnTitle:'全选'
    columnWidth: "5%",
};
/**
 * 查询购物车信息
 * @param isShowMessage 是否显示消息提示
 */
const selectCart = (isShowMessage: boolean) => {
    getCartInfoList(isShowMessage).then(response => {
        tableData.value = response.data[0];
        console.table(tableData.value);
    });
};

/**
 * 购物车中商品数量数量改变
 * @param cartItem 购物车当前行商品信息
 */
const numChange = (cartItem: CartItem) => {
    updateProductFromCart(cartItem.skuId, cartItem.count).then(() => {
        // 2. 重新查询购物车信息
        selectCart(false);
    });

};
/**
 * 删除商品
 */
const deleteProduct = (skuIds: number[]) => {
    // 2. 调用删除接口
    deleteProductFromCartBatch(skuIds).then(() => {
        // 3. 重新查询购物车信息
        selectCart(false);
    });
};


/**
 * 跳转结算页
 */
const goToSettlement = () => {
    router.push({
        name: "Settlement",
    });
};

/**
 * 挂载钩子
 */
onMounted(() => {
    //1. 进入页面后查询购物车信息
    selectCart(true);
});


</script>

<style lang="scss" scoped>

</style>